<template>
  <div class="order">
    <!-- 内容展示区域 -->
    <div class="content">
      <van-nav-bar title="订单" />
      <van-tabs v-model="active" @click="queryEmployeeOrder">
        <van-tab title="全部"></van-tab>
        <van-tab title="待接单"></van-tab>
        <van-tab title="待服务"></van-tab>
        <van-tab title="已完成"></van-tab>
      </van-tabs>
      <!-- 订单展示 -->
      <div>
        <van-card
          class="orderCard"
          @click="toOrderDetails(employee.id)"
          v-for="employee in EmployeeData"
          :key="employee.id"
          :title="employee.customer.username"
        >
          <template #thumb>
            <van-image fit="cover" round :src="employee.customer.userFace" />
          </template>
          <template #title>
            <div style="font-size: 13px">
              <span>{{ employee.customer.username }}</span>
              <van-tag
                plain
                v-if="employee.status == '待接单'"
                type="primary"
                style="float: right"
                >{{ employee.status }}</van-tag
              >
              <van-tag
                plain
                v-else-if="employee.status == '待服务'"
                type="warning"
                style="float: right"
                >{{ employee.status }}</van-tag
              >
              <van-tag plain v-else type="success" style="float: right">{{
                employee.status
              }}</van-tag>
              <!-- <span style="color:orange;float:right;"></span> -->
            </div>
          </template>
          <template #desc>
            <p>
              {{
                employee.address.province +
                employee.address.city +
                employee.address.area +
                employee.address.address
              }}
            </p>
          </template>
          <template #price>
            <span style="color: black; font-size: 12px">{{
              turnTime(employee.orderTime)
            }}</span>
          </template>
          <template #num>
            <span style="color: red; font-size: 12px"
              >￥{{ employee.total }}</span
            >
          </template>
        </van-card>
      </div>
      <div style="height: 80px"></div>
    </div>
  </div>
</template>

<script>
// 引入moment
import moment from "moment";
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
      employeeID: "",
    };
  },
  computed: {
    //引入员工数据
    ...mapState("user", ["userInfo"]),
    ...mapState("employee", ["EmployeeData"]),
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    ...mapActions("employee", ["getEmployeeData"]),
    //获取员工id
    queryEmployeeId() {
      // 定义参数
      let data = {
        page: 1,
        pageSize: 100,
      };
      this.getUserInfo(data);
      this.employeeID = this.userInfo.id;
    },
    // 获取员工全部订单
    queryEmployeeOrder() {
      // 全部
      let data;
      if (this.active == 0) {
        data = {
          page: 1,
          pageSize: 100,
          employeeId: this.employeeID,
        };
      }
      // 待服务
      if (this.active == 1) {
        data = {
          page: 1,
          pageSize: 100,
          employeeId: this.employeeID,
          status: "待接单",
        };
      }
      // 待接单
      if (this.active == 2) {
        data = {
          page: 1,
          pageSize: 100,
          employeeId: this.employeeID,
          status: "待服务",
        };
      }
      // 已完成
      if (this.active == 3) {
        data = {
          page: 1,
          pageSize: 100,
          employeeId: this.employeeID,
          status: "已完成",
        };
      }
      this.getEmployeeData(data);
    },

    // 跳转到员工订单详情
    toOrderDetails(orderId) {
      this.$router.push({
        //路径
        path: "/manager/orderdetails",
        query: {
          //参数传递
          orderId,
        },
      });
    },
    turnTime(date) {
      //把时间戳转成时间日期 方法
      return moment(date).format("YYYY-MM-DD A HH:mm");
    },
  },
  created() {
    // 自动获取员工数据
    this.queryEmployeeId();
    //全部
    this.queryEmployeeOrder();
  },
};
</script>

<style scoped>
.van-nav-bar {
  background-image: linear-gradient(to top, #ebc0fd 0%, #d9ded8 100%);
}

.orderCard {
  width: 90%;
  margin: 0 auto;
  margin-top: 3%;
  box-shadow: 0 1px 5px #aaa;
  background-color: #fff;
}
</style>